<!--租户管理-推客等级-->
<template>
    <div class="content-wrapper a-base-container">
        <div class="business-big-box" style="margin:2px 8px;">
            <!-- <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="24">
                            <div class="clearfix">
                                <div style="float:left;line-height:32px;margin-left:10px;">
                                    交易条件生效时间：
                                </div>
                                <div style="float:left;line-height:32px;margin-top:7px;">
                                    <a-radio-group v-model="timeValue" @change="onChange">
                                        <a-radio :value="1">
                                            付款后生效
                                        </a-radio>
                                        <a-radio :value="2">
                                            交易完成后生效
                                        </a-radio>
                                    </a-radio-group>
                                </div>
                                <div style="float:left">
                                    <a-button type="primary">保存</a-button>
                                </div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="show">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">添加等级</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div> -->
            <div class="level">
                <div class="level-add">
                    <a-button type="primary" @click="show">添加等级</a-button>
                </div>
                <div class="level-table">
                    <a-table :scroll="{'x':1000,'y':500}" :dataSource="dataSource" :columns="columns" :pagination="false" bordered>
                        <template slot="conditions" slot-scope="text,record,index">
                            <div v-if="record.id != 1">
                                <div class="margin-bottom-10" v-show="record.orderAmount">当月分佣订单额≥{{record.orderAmount}}</div>
                                <div class="margin-bottom-10" v-show="record.inviteCount">邀请人数≥{{record.inviteCount}}</div>
                                <div class="margin-bottom-10" v-show="record.crmCount">当月累积客户数≥{{record.crmCount}}</div>
                                <div class="margin-bottom-10" v-show="record.orderCount">当月分佣订单数≥{{record.orderCount}}</div>
                                <div class="margin-bottom-10" v-show="record.settlementCommission">当月已结算佣金额≥{{record.settlementCommission}}</div>
                            </div>
                            <div v-else>
                                无，成为推客默认为此等级
                            </div>
                        </template>
                        <template slot="commission" slot-scope="text,record,index">
                            <div class="margin-bottom-10">直推佣金：{{record.directCommission.toFixed(1)}}</div>
                            <div class="margin-bottom-10">邀请奖励：{{record.inviteReward.toFixed(1)}}</div>
                        </template>
                        <template slot="operation" slot-scope="text,record,index">
                            <a-row :span="24">
                                <a-col :span="12">
                                    <div @click="edit(record)" style="color:#00A0E9;margin-bottom:10px;">
                                        <a-icon type="form" />编辑
                                    </div>
                                </a-col>
                                <a-col :span="12">
                                    <div @click="removeList(record)" v-if="record.id != 1" style="color:#00A0E9">
                                        <a-icon type="delete" />删除
                                    </div>
                                </a-col>
                            </a-row>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
        <a-modal v-if="visible" :title="title" :visible="visible" @cancel="cancel" @ok="ok" :width="800">
            <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 6 }">
                <a-form-item label="等级名称">
                    <a-input v-model="requestData.name" />
                </a-form-item>
                <a-form-item label="等级" v-if="requestData.id != 1">
                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.level" />
                </a-form-item>
            </a-form>
            <a-card size="small" class="margin-bottom-10" title="升级条件" style="width: 600px">
                <div v-if="requestData.id != 1">
                    <div class="display">
                        <div class="display-label">
                            满足方式：
                        </div>
                        <div class="display-input">
                            <a-radio-group v-model="requestData.mode" @change="onChangeRadio">
                                <a-radio :value="1">
                                    勾选条件满足其一即可
                                </a-radio>
                                <a-radio :value="2">
                                    勾选条件需要全部满足
                                </a-radio>
                            </a-radio-group>
                        </div>
                    </div>
                    <div class="display">
                        <div class="display-label">
                            可选条件：
                        </div>
                        <div class="display-input">
                            <a-row :gutter="[0,8]">
                                <a-col :span="24">
                                    当月分佣订单额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;达到：
                                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.orderAmount" style="width:100px" />
                                </a-col>
                                <a-col :span="24">
                                    当月邀请推客数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;达到：
                                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.inviteCount" style="width:100px" />
                                </a-col>
                                <a-col :span="24">
                                    当月累积客户数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;达到：
                                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.crmCount" style="width:100px" />
                                </a-col>
                                <!-- <a-col :span="24">
                                    累积消费额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;达到：
                                    <a-input v-model="requestData.consumeAmount" style="width:100px" />
                                </a-col> -->
                                <a-col :span="24">
                                    当月分佣订单数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;达到：
                                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.orderCount" style="width:100px" />
                                </a-col>
                                <a-col :span="24">
                                    当月已结算佣金额&nbsp;&nbsp; 达到：
                                    <a-input oninput="value=value.toString().match(/^\d+(?:\.\d)?/)" v-model="requestData.settlementCommission" style="width:100px" />
                                </a-col>
                            </a-row>
                        </div>
                    </div>
                </div>
                <div v-else style="text-align:center">
                    默认等级无需升级条件
                </div>
            </a-card>
            <a-card size="small" title="佣金系数" style="width: 600px">
                <div class="display">
                    <div class="display-label">
                        直推佣金：
                    </div>
                    <div class="display-input">
                        <a-input-group compact>
                            <a-input style="width:40px;text-align:center" readonly value="x" />
                            <a-input oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" v-model="requestData.directCommission" style="width: 200px" placeholder="系数" />
                        </a-input-group>
                        该等级推客的 [直推佣金] = 基础佣金 * 此系数
                    </div>
                </div>
                <div class="display">
                    <div class="display-label">
                        邀请奖励：
                    </div>
                    <div class="display-input">
                        <a-input-group compact>
                            <a-input style="width:40px;text-align:center" readonly value="x" />
                            <a-input oninput="value=value.toString().match(/^\d+(?:\.\d{0,2})?/)" v-model="requestData.inviteReward" style="width: 200px" placeholder="系数" />
                        </a-input-group>
                        该等级推客的 [邀请奖励] = 基础佣金 * 此系数
                    </div>
                </div>
            </a-card>
        </a-modal>
    </div>
</template>
<script>

import { mapState } from "vuex";
import { save, getList, remove } from "@/api/finance/twitter";

export default {
    data () {
        return {
            name: null,
            level: null,

            timeValue: 1,
            dataSource: [],//列表数据

            columns: [{
                title: "等级名称",
                dataIndex: "name",
                key: "name",
                align: "center",
                width: 120,
                // customRender: (text, row, index) => {
                //     return row.freeUser + row.companyUser
                // }
            }, {
                title: "等级",
                dataIndex: "level",
                key: "level",
                align: "center",
                width: 120,
                customRender: (text, row, index) => {
                    return 'L' + text
                }
            }, {
                title: "当前人数",
                dataIndex: "crmCount",
                key: "crmCount",
                width: 120,
                align: 'center'
            }, {
                title: "升级条件",
                dataIndex: "conditions",
                key: "conditions",
                width: 120,
                scopedSlots: {
                    customRender: 'conditions'
                },
            }, {
                title: "佣金系数",
                dataIndex: "commission",
                key: "commission",
                width: 120,
                scopedSlots: {
                    customRender: 'commission'
                },
            }, {
                title: "操作",
                dataIndex: "operation",
                key: "operation",
                width: 80,
                align: "center",
                scopedSlots: {
                    customRender: 'operation'
                },
            }],
            visible: false,
            requestData: {
                consumeAmount: null,//累计消费额
                crmCount: null,//累计客户数
                directCommission: null,//直推佣金
                inviteCount: null,//邀请人数
                inviteReward: null,//邀请奖励
                level: null,//等级
                mode: 1,//方式: 1满足其一2: 全部满足
                name: null,//等级名称
                orderAmount: null,//分佣订单额
                orderCount: null,//分佣订单数
                settlementCommission: null,//结算佣金
                status: null,//状态
            }
        }
    },
    activated () {
        this.getDataList();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    methods: {
        onChangeRadio (e) {
            console.log(e);
        },
        show () {
            this.visible = true;
            this.title = '添加推客等级'
            this.requestData = {
                mode: 1,//方式: 1满足其一2: 全部满足
            };
        },
        cancel () {
            this.visible = false;
        },
        ok () {
            if (this.requestData.directCommission < 1) {
                this.$message.warning('直推佣金系数必须大于1');
                return;
            }
            if (this.requestData.inviteReward < 1) {
                this.$message.warning('邀请奖励系数必须大于1');
                return;
            }
            if (this.requestData.level <= 1) {
                this.$message.warning('等级必须大于1');
                return;
            }
            save(this.requestData).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功');
                    this.cancel();
                    this.getDataList();
                }
            })
        },
        edit (data) {
            this.visible = true;
            this.title = '修改推客等级';
            console.log(data);
            this.requestData = data;
        },
        removeList (data) {
            let that = this;
            this.$confirm({
                title: `是否确认删除该数据？`,
                content: "",
                onOk () {
                    remove({ id: data.id }).then(res => {
                        if (res.code == 200) {
                            that.$message.success("删除成功");
                            that.getDataList();
                        } else {
                            that.$message.warning(res.message);
                        }
                    })
                },
                onCancel () { }
            });
        },
        //获取凭证列表
        getDataList () {
            getList().then(response => {
                if (response.code === 200) {
                    let data = response.data;
                    if (data.length < 1) {
                        this.dataSource = [];
                    } else {
                        for (let i = 0; i < data.length; i++) {
                            data[i].key = data[i].id;
                        }
                        this.dataSource = data;
                    }
                }
            }).catch(error => { });
        }
    }
};
</script>
<style lang="less" scoped>
    @import '~@/style/setting/business.less';
    .level {
        height: calc(100% - 55px);
        min-width: 1000px;
        border-bottom: none;
        overflow-y: auto;
        margin: 10px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        &-add {
            width: 100%;
        }
        &-table {
            margin-top: 20px;
        }
    }
    .display {
        display: flex;
        margin-top: 10px;
        &-label {
            flex: 0 0 100px;
            line-height: 32px;
        }
        &-input {
            flex: 1;
        }
    }
</style>
 